import { Button, Dropdown, Menu } from "antd";
import React, { useEffect, useState } from "react";
import { useNavigate } from "react-router-dom";
import styled from "styled-components";
import { ReactComponent as DateIcon } from "../../assets/icon/SlideMenu/项目进展表.svg";
import menuItems from "../../assets/Json/MenuJson/menu";

import { ReactComponent as HomeIcon } from "../../assets/icon/SlideMenu/首页.svg";
import { ReactComponent as CustomerIcon } from "../../assets/icon/SlideMenu/客户管理.svg";
import { ReactComponent as OutsourceIcon } from "../../assets/icon/SlideMenu/外包商管理.svg";
import { ReactComponent as ContractIcon } from "../../assets/icon/SlideMenu/合同管理.svg";
import { ReactComponent as ProjectIcon } from "../../assets/icon/SlideMenu/项目管理.svg";
import { ReactComponent as FinancialIcon } from "../../assets/icon/SlideMenu/财务管理.svg";
import { ReactComponent as DataSearchIcon } from "../../assets/icon/SlideMenu/数据分析查询.svg";
import { ReactComponent as ContractApplyIcon } from "../../assets/icon/SlideMenu/合同申请.svg";
import { ReactComponent as ContractChange } from "../../assets/icon/SlideMenu/合同修改.svg";
import { ReactComponent as RunProjectIcon } from "../../assets/icon/SlideMenu/运营项目管理.svg";
import { ReactComponent as RunProjectChildIcon } from "../../assets/icon/SlideMenu/子项目管理.svg";
import MenuStyle from "./menu.module.css";

const CustomMenu = styled(Menu)`
  .ant-menu-item-selected {
    background-color: #ff4d4f !important; /* 选中项背景颜色 */
    color: #ffffff !important; /* 选中项文本颜色 */
  }

  .ant-menu-sub .ant-menu-item-selected {
    background-color: #ff7875 !important; /* 子菜单选中项背景颜色 */
    color: #ffffff !important; /* 子菜单选中项文本颜色 */
  }
`;

const iconMap = {
  HomeIcon: <HomeIcon width={17} />,
  CustomerIcon: <CustomerIcon width={17} />,
  OutsourceIcon: <OutsourceIcon width={17} />,
  ContractIcon: <ContractIcon width={17} />,
  ProjectIcon: <ProjectIcon width={17} />,
  FinancialIcon: <FinancialIcon width={17} />,
  DataSearchIcon: <DataSearchIcon width={17} />,
  ContractApplyIcon: <ContractApplyIcon width={17} />,
  ContractChange: <ContractChange width={17} />,
  RunProjectChildIcon: <RunProjectChildIcon width={17} />,
  DateIcon: <DateIcon width={17} />,
};

function MenuCom({
  tags,
  setTags,
  current,
  setCurrent,
  openKeys,
  setOpenKeys,
}) {
  const navigate = useNavigate();

  const generateMenuItems = (items) => {
    return items.map((item) => ({
      key: item.key,
      label: (
        <p className={MenuStyle.menItem} onClick={() => handleMenuClick(item)}>
          {iconMap[item.icon]}
          <span>{item.label}</span>
        </p>
      ),
      children: item.children ? generateMenuItems(item.children) : null,
    }));
  };

  const handleMenuClick = (item) => {
    setCurrent(item.key);
    sessionStorage.setItem("pathKey", item.key);

    if (!tags.some((tag) => tag.key === item.key) && !item.children) {
      const newTag = { key: item.key, label: item.label, url: item.url };
      const updatedTags = [...tags, newTag];
      setTags(updatedTags);
      sessionStorage.setItem("tags", JSON.stringify(updatedTags));
    }

    if (item.url) {
      navigate(item.url);
      sessionStorage.setItem("current", item.key);
    }

    if (item.children) {
      const newOpenKeys = getOpenKeys(item.key, menuItems);
      setOpenKeys(newOpenKeys);
    }
  };

  const getOpenKeys = (key, items) => {
    for (let item of items) {
      if (item.key === key) {
        return [item.key];
      }
      if (item.children) {
        const openKeys = getOpenKeys(key, item.children);
        if (openKeys.length > 0) {
          return [item.key, ...openKeys];
        }
      }
    }
    return [];
  };

  const handleOpenChange = (keys) => {
    const latestOpenKey = keys.find((key) => !openKeys.includes(key));
    if (latestOpenKey) {
      setOpenKeys([latestOpenKey]);
      sessionStorage.setItem("openKeys", JSON.stringify([latestOpenKey]));
    } else {
      setOpenKeys([]);
      sessionStorage.setItem("openKeys", JSON.stringify([]));
    }
  };

  return (
    <Menu
      style={{
        width: "100%",
        padding: "0",
        margin: "0",
        background: "#015478",
        color: "white",
      }}
      openKeys={openKeys}
      onOpenChange={handleOpenChange}
      selectedKeys={[current]}
      mode="inline"
      items={generateMenuItems(menuItems)}
    />
  );
}

export default MenuCom;
